import { Image } from "expo-image";
import { Link } from "expo-router";
import { Text, View, StyleSheet, ScrollView } from "react-native";
import ListLink from "@/components/ListLink";
import Chart from "@/components/chart";
export default function AboutScreen() {
  return (
    <View style={styles.container}>
      <View
        style={{
          justifyContent: "space-between",
          flexDirection: "row",
          alignItems: "center",
        }}
      >
        <Image
          source={require("@/assets/images/avter.png")}
          style={{ height: 28, width: 28 }}
        />
        <Image
          source={require("@/assets/images/avtertitle.png")}
          style={{ height: 28, width: 100 }}
        />
        <Image
          source={require("@/assets/images/avtertopic.png")}
          style={{ height: 28, width: 28 }}
        />
      </View>
      <View style={{ gap: 20, flex: 1 }}>
        <View>
          <Text style={styles.subTitle}>Assalamu'alaikum</Text>
          <Text style={styles.subTitle}>Ustadz Abi</Text>
        </View>
        <View style={{ flex: 1 }}>
          <ScrollView
            contentContainerStyle={{
              flexDirection: "row",
              flexWrap: "wrap",
              gap: 10,
            }}
          >
            {Array.from({ length: 12 }, (_, index) => index).map((_, index) => (
              <ListLink key={index} index={index} listText={styles.listText} />
            ))}
          </ScrollView>
        </View>
      </View>
      <View style={{ justifyContent: "space-between", flexDirection: "row" }}>
        <Chart />
        <Chart />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#F5F7F9",
    padding: 22,
    gap: 20,
  },
  subTitle: {
    fontSize: 14,
    fontWeight: 500,
    lineHeight: 20,
    color: "#003F38",
  },
  listText: {
    color: "#003F38",
    fontSize: 11,
    fontWeight: 500,
    lineHeight: 15,
    display: "flex",
  },
});
